<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>确认订单</title>
    <!-- Bootstrap -->
    <link href="../assets/css/mui.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/buffetmeal_content.css" rel="stylesheet" />
  </head>
  <style type="text/css">
    
  </style>

  <body>
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">确认订单</h1>
      <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <div class="zhuowei">
        <span class="zhuowei-title mui-pull-left">
          桌位<span class="zhuowei-num"><i class="icon iconfont icon-saomiao icon-size"></i></span>
        </span>
        <span class="zhuowei-saoma mui-pull-right">
          扫一扫
        </span>
      </div>
      <div class="caipin">
        <div class="caipin-list">
          <div class="caipin-item mui-row">
            <div class="mui-col-xs-4 cainame">土豆丝</div>
            <div class="mui-col-xs-4 caiprice">￥12</div>
            <div class="mui-col-xs-4 caifen">
              <img src="../assets/images/jian.png" class="caija-pic caipinjian">
              <span class="caifen-num">2</span>
              <img src="../assets/images/jia.png" class="caija-pic caipinjia">
            </div>
          </div>
          <div class="caipin-item mui-row">
            <div class="mui-col-xs-4 cainame">土豆丝</div>
            <div class="mui-col-xs-4 caiprice">￥12</div>
            <div class="mui-col-xs-4 caifen">
              <img src="../assets/images/jian.png" class="caija-pic caipinjian">
              <span class="caifen-num">2</span>
              <img src="../assets/images/jia.png" class="caija-pic caipinjia">
            </div>
          </div>
        </div>
        <div class="caipin-total">
          <div class="total-list mui-row">
            <div class="mui-col-xs-4 totaltitle">合计</div>
            <div class="mui-col-xs-4 totalfen">4份</div>
            <div class="mui-col-xs-4 totalprice total-priceprice">￥48</div>
          </div>
          <div class="mui-pull-right">
            <button type="button" class="mui-btn mui-btn-success addCai-btn">加菜</button>
          </div>
        </div>
      </div>
      <div class="yongcan-list">
        <div class="yongcan-item">
          <span class="mui-pull-left yongcan-title">用餐人数</span>
          <span class="mui-pull-right yongcan-con">2人</span>
        </div>
        <div class="yongcan-item">
          <span class="mui-pull-left yongcan-title">备注</span>
          <span class="mui-pull-right yongcan-con">
            <input type="text" class="mui-input-clear yongcan-input" placeholder="请输入用户名">
          </span>
        </div>
      </div>
      <div style="height: 60px;"></div>
      <div class="yongcantotal-footer">
        <span class="mui-pull-left footer-total">
          <span class="totaltitle">共计</span>
        <span class="total-priceprice">￥48</span>
        </span>
        <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-right pay-btn">立即支付</button>
      </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/mui.js"></script>
    <script type="text/javascript">
    	//添加菜数
      $('.caipinjia').on('click', function() {
        var number = $(this).siblings('.caifen-num').text();
        if(number >= 0) {
          number++
        }
        $(this).siblings('.caifen-num').text(number)
      })
      $('.caipinjian').on('click', function() {
        var number = $(this).siblings('.caifen-num').text();
        if(number >= 1) {
          number--
        }
        $(this).siblings('.caifen-num').text(number)
      })
    </script>
  </body>

</html>